<template>
	<view class="category-level" :style="mainHeight">
		<view class="category-level-box" v-if="cateList.length && isLoadingCate">
			<nsSearch :siteId="siteId"></nsSearch>
			<view class="category-goods">
				<scroll-view scroll-y="true" class="oneScroll">
					<view
						class="oneScroll-item using-hidden"
						v-for="(item, index) in cateList"
						:key="index"
						:class="{ 'active color-base-text color-base-bg-before': item.category_id_1 == oneCategoryId }"
						@click="selectOneCategory(item.category_id_1, index, true)"
					>
						{{ item.short_name ? item.short_name : item.category_name }}
					</view>
				</scroll-view>
				<view class="twoScroll">
					<view class="category-cate-top"></view>
					<scroll-view scroll-y="true" :style="{ height: 'calc(100% - ' + height + ' )' }">
						<image
							class="cate-adv"
							v-if="categoryAdvImage"
							:src="$util.img(categoryAdvImage)"
							@error="categoryAdvImage = $util.img('/upload/uniapp/default_ad.png')"
							mode="widthFix"
						></image>
						<!-- <view class="twoScroll-list" v-if="twoCateList.length"> -->
						<view class="twoScroll-list">
							<view class="twoScroll-item" v-for="(item, index) in twoCateList" :key="index" @click="toListDetail(item.category_id_2)">
								<!-- <image v-if="item.image" class="twoScroll-item-image" :src="$util.img(item.image)" @error="cateImgError(index)" mode="aspectFit"></image> -->
								<image class="twoScroll-item-image" :src="$util.img(item.image)" @error="cateImgError(index)" mode="aspectFit"></image>
								<image class="twoScroll-item-image" :src="$util.getDefaultImage().default_category_img" mode="aspectFit"></image>
								<text class="using-hidden twoScroll-item-text">{{ item.short_name ? item.short_name : item.category_name }}</text>
							</view>
						</view>
						
						<!-- <ns-empty v-else :isIndex="!1" :fixed="!1" text="暂无商品分类"></ns-empty> -->
						<ns-empty :isIndex="!1" :fixed="!1" text="暂无商品分类"></ns-empty>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- TODO -->
		<ns-empty v-else :isIndex="!1"></ns-empty>
		<!-- <ns-empty :isIndex="!1"></ns-empty> -->
	</view>
</template>

<script>
import nsSearch from '@/components/ns-search/ns-search.vue';
import globalConfig from '@/common/js/golbalConfig.js';
export default {
	data() {
		return {
			isLoadingCate: false,
			categoryAdvImage: '', //广告位
			cateList: [], //所有分类
			twoCateList: [], //二级分类
			height: 0,
			oneCategoryId: 0,
			TwoCategoryId: 0
		};
	},
	components: {
		nsSearch
	},
	mixins: [globalConfig],
	props: {
		value: {
			type: Object
		},
		categoryHeight: {
			type: [Number, String],
			default: 0
		},
		siteId:{
			type: [Number, String],
			default: 0
		}
	},
	created() {
		this.getCategoryList();
	},
	computed: {
		mainHeight() {
			var height = this.categoryHeight ? this.categoryHeight + 'px' : '100%';
			height = 'height:' + height;
			return height;
		}
	},
	onShow() {
		this.getCategoryList()
	},
	methods: {
		getCategoryList() {
			console.log('商品分类333')
			let url = '/api/goodscategory/tree',
				data = {
					level: this.value.level,
					template: this.value.template
				};
			if (this.siteId) {
				data.site_id = this.siteId;
				url = '/api/shopgoodscategory/tree';
				console.log('一级分类111')
			}
			this.isLoadingCate = false;
			this.$api.sendRequest({
				url: url,
				data: data,
				success: res => {
					this.isLoadingCate = true;
					if (res.code != 0) {
						this.$util.showToast({
							title: res.message
						});
						return false;
					}
					
					if (res.code == 0 && res.data.length) {
						
						this.cateList = res.data;
						console.log('所有分类cateList',this.cateList)
						this.getGoodsList()//调用二级分类
						this.categoryAdvImage = this.cateList[0].image_adv;
						this.oneCategoryId = this.cateList[0].category_id_1;
						console.log('一111',res.data)
						if (res.data[0].child_list) {
							this.twoCateList = res.data[0].child_list;
							if (res.data[0].child_list[0]) this.TwoCategoryId = res.data[0].child_list[0].category_id_2;
							console.log('111')
						}

						this.$nextTick(function() {
							const query = uni.createSelectorQuery().in(this);
							query
								.select('.category-cate-top')
								.boundingClientRect(data => {
									this.height = data.height + 'px';
								})
								.exec();
						});
					}

					this.$emit('netFinish', true);
				}
			});
		},
		
		// 商品
		getGoodsList() {
			console.log('diy-goods-level-one-third111',uni.getStorage('city'))
			console.log('isNetword || isAll 111',!this.isNetwork,this.isAll)
			if (!this.isNetwork || this.isAll) return;
		
			this.isNetwork = 0;
			this.isLoading = true;
		
			let data = {
				page: this.page_num,
				page_size: this.page_size
			};
			if (this.siteId) {
				data.shop_category_id = this.cateList[this.oneIndex].category_id_1;
			} else {
				data.category_id = this.cateList[this.oneIndex].category_id_1;
			}
			console.log('商品111',)
			this.$api.sendRequest({
				url: '/api/goodssku/page',
				data: data,
				success: res => {
					this.isNetwork = 1;
					this.isLoading = false;
					console.log('goodslist111',res)
		
					if (res.code == 0 && res.data) {
						let newArr = res.data.list.length ? res.data.list : [];
						for (let i in newArr) {
							newArr[i]['sku_image'] = newArr[i]['goods_image'].split(',')[0];
						}
						//设置列表数据
						if (this.page_num == 1) this.goodsList = []; //如果是第一页需手动制空列表
						this.goodsList = this.goodsList.concat(newArr); //追加新数1据
						++this.page_num;
		
						if (this.goodsList.length == res.data.count) this.isAll = true;
		
						this.getCartData();
					}
		
					this.$emit('netFinish', true);
				}
			});
		},
		toListDetail(id) {
			let data = {
				category_id: id
			};
			let url = '/pages/goods/list/list';
			if (this.siteId) {
				url = '/otherpages/shop/list/list';
				data.site_id = this.siteId;
			}

			this.$util.redirectTo(url, data);
		},
		selectOneCategory(onecateId, index) {
			this.oneCategoryId = onecateId;
			this.categoryAdvImage = this.cateList[index].image_adv;

			this.twoCateList = this.cateList[index].child_list ? this.cateList[index].child_list : [];
			if (this.twoCateList.length) {
				this.TwoCategoryId = this.twoCateList[0].category_id_2;
				this.TwoCategoryIndex = 0;
			} else {
				this.TwoCategoryId = 0;
			}

			this.$nextTick(function() {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.category-cate-top')
					.boundingClientRect(data => {
						this.height = data.height + 'px';
					})
					.exec();
			});
		},
		cateImgError(index) {
			this.twoCateList[index].image = this.$util.getDefaultImage().default_category_img;
			this.$forceUpdate();
		}
	}
};
</script>
<style lang="scss">
@import '@/components/diy-goods-level-category/diy-goods-level-category.scss';
.twoScroll-list {
	padding: 0 34rpx;
	overflow: hidden;
	.twoScroll-item {
		margin: 0 60rpx 40rpx 0;
		width: 114rpx;
		display: inline-block;
		text-align: center;
		line-height: 1;
		.twoScroll-item-image {
			width: 114rpx;
			height: 114rpx;
			margin-bottom: 20rpx;
		}
		.twoScroll-item-text {
			font-size: $font-size-sub;
			color: $color-title;
		}
		&:nth-child(3n + 3) {
			margin-right: 0;
		}
	}
}
</style>
